Summary

This pull request introduces two new hooks, jsxDomAttributeHook and jsxDomChildrenHook, to extend the functionality of jsx-dom. These hooks enable developers to integrate reactive libraries like Preact Signals for dynamic DOM updates.

Features

1. jsxDomAttributeHook: Allows interception of attribute assignment. For example, with Preact Signals, this hook can be added to the Signal prototype to automatically update attribute values when the signal changes.
2. jsxDomChildrenHook: Enables dynamic replacement of child elements using custom logic, such as placeholder comments.

Use Cases

• Reactive Attributes: Automatically update DOM attributes when the underlying state changes.
• Dynamic Children: Replace child elements dynamically based on application logic.
• Other use cases: Other than signals, can be used to implement logic similar to integrated hooks like useClassList without having to modify jsx-dom.

Compatibility

• Fully backward-compatible. The hooks are opt-in and do not interfere with existing functionality.

Tests

• Added comprehensive tests to validate the behavior of the hooks in various scenarios, including edge cases.

Example Usage

import { Signal } from "@preact/signals-core";

Signal.prototype.jsxDomAttributeHook = function (node, attr) {
  // Custom logic for reactive attribute updates
};

Signal.prototype.jsxDomChildrenHook = function (parentNode) {
  // Custom logic for dynamic child replacement
};

I already did a quick implementation for signals-core and tested it successfully.

Next Steps and Things to Consider

• The hooks adds some overhead, but based on my quick benchmarks, it is around 5 percent.
• Attributes accept certain types, like string, bool etc. I could add all attributes option to accept a value with the jsxDomAttributeHook, e.g.:

type TOrHookT = T | { jsxDomAttributeHook(): T }
interface SomeElementAttributes {
   someattr: TOrHookT<string | bool>
}

But I did not want to complicate the pull request and for now it is possible to cast to any or use some other tricks.

• For reactive update of attributes, the hooks would have to duplicate some logic in the attribute function, like "class", "className" handling, dataset / style handling etc. Some of this logic is exported but some of them not, or are not separate functions. Could consider moving the hook to attr / attrNS to make it easier for the hooks to handle updates, but there are several other special handled attributes / props etc. so would also need to modify more places in the code.
• Currently, the hooks are placed in the passed attribute value / child node. Another option could be to have an exported hooks object like:

export const jsxDomHooks = {
   attribute: function(...),
   children: function(...)
}

And call these for any type of value, but not sure if it would be better, though it would let external libs to intercept any value not just signals etc.